<template>
  <div class="industry-headlines">
    <div class="industry-headlines__view">
      <h1 class="ih__name">{{ IndustryHeadlines.name }}</h1>
      <p class="ih__illustrate">{{ IndustryHeadlines.illustrate }}</p>
      <div class="ih__card">
        <div
          class="ih__card__view"
          v-for="(item, index) in showList"
          :key="index"
          @click="handleDetailClick(item)"
        >
          <div class="ih__card__img">
            <img :src="item.url" alt="" object-fit="cover" />
          </div>
          <div class="ih__card__content">
            <h2>{{ item.title }}</h2>
            <p>{{ item.desc }}</p>
            <div class="ih__card__time">
              <hb-svg-icon
                name="in_time"
                class="svg-back"
                width="14"
                height="14"
              ></hb-svg-icon>
              <span>{{ item.time }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="ih__looks" @click="handleClickTab('/steel-home')">
        <span>查看更多 </span>
        <hb-svg-icon
          name="right"
          class="svg-back"
          width="14"
          height="14"
        ></hb-svg-icon>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { IndustryHeadlines } from "../constants";
import { newsList } from "@/views/steel-home/major/constants";
import { useRouter } from "vue-router";
import { computed } from "vue";
const router = useRouter();
const handleClickTab = (name: string) => {
  router.push(name);
};
const handleDetailClick = (item: any) => {
  router.push({
    path: "/steel-home-detail",
    query: {
      id: item.id,
    },
  });
};
const showList = computed(() => {
  return newsList.slice(0, 3);
});
</script>
<style lang="scss" scoped>
.industry-headlines {
  height: 872px;
  box-sizing: border-box;
  padding: 100px 0 0 0;
  .industry-headlines__view {
    width: 1280px;
    margin: 0 auto;
    text-align: center;
    .ih__name {
      font-size: 36px;
      color: #172b4d;
      margin-bottom: 18px;
    }
    .ih__illustrate {
      font-size: 18px;
      color: #7a869a;
    }
  }
  .ih__card {
    display: flex;
    justify-content: space-between;
    text-align: left;
    padding-top: 50px;
    margin-bottom: 60px;
    .ih__card__view {
      width: 410px;
      height: 464px;
      display: flex;
      flex-direction: column;
      border-radius: 8px 8px 8px 8px;
      box-shadow: 0px 6px 24px 0px rgba(164, 159, 159, 0.15);
      cursor: pointer;
      overflow: hidden;
      transition: transform 0.8s ease; /* 添加过渡动画效果 */
      &:hover {
        transform: translateY(-30px);
        .ih__card__content {
          h2 {
            color: #1678ff;
          }
          p {
            border-bottom: 1px solid #1678ff;
          }
        }
      }
      .ih__card__img {
        height: 212px;
        position: relative;
        overflow: hidden;
        img {
          border-radius: 8px 8px 0 0;
          transition: transform 1s ease; /* 添加过渡动画效果 */
          &:hover {
            transform: scale(
              1.3
            ); /* 当鼠标悬停在容器上时，将图像放大到原始大小的1.2倍 */
          }
        }
      }
      .ih__card__content {
        flex: 1;
        box-sizing: border-box;
        padding: 26px 24px;
        h2 {
          height: 60px;
          font-size: 20px;
          color: #172b4d;
          font-weight: 600;
          margin-bottom: 16px;
        }
        p {
          height: 95px;
          font-size: 16px;
          color: #7a869a;
          margin-bottom: 16px;
          border-bottom: 1px solid #ebecf0;
        }
        .ih__card__time {
          display: flex;
          align-items: center;
          color: #4e5969;
          .svg-back {
            margin-right: 10px;
          }
        }
      }
    }
  }
  .ih__looks {
    height: 20px;
    width: 200px;
    margin: 0 auto;
    text-align: center;
    line-height: 20px;
    color: #1678ff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
</style>
